<template>
	<view class="container" v-if="shopInfo">
		<view class="nav-bar" :style="{top: paddingTop + 4 + 'px', height: navBarHeight-8 + 'px', width:  navBarHeight-8 + 'px'}" @click="back">
			<uni-icons type="left" size="24" color="#ffffff"></uni-icons>
		</view>
		<view class="uni-margin-wrap" >
			<swiper v-if="shopInfo.shop.images" class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000"
				:duration="500">
				<swiper-item v-for="(item,i) in shopInfo.shop.images" :key="i" >
					<img class="swiper-ad" :src="item" alt="" />
				</swiper-item>
			</swiper>
			<image v-else class="single-banner" :src="shopInfo.shop.thumbnail" mode=""></image>
		</view>
		<view class="shop-box">
			<view class="box">
				<view class="flex">
					<view class="flex-center">
						<view class="shop-name">
							{{shopInfo.shop.name}}
						</view>
						<view class="shop-cate">
							{{shopInfo.shopCategory.name}}
						</view>
					</view>
					<template v-if="shopInfo.shop.online_shop !== 1">
						<view v-if="shopInfo.shop.status == 2" class="shop-btn" @click="toPay">
							线下买单
						</view>
						<view v-else class="shop-btn-grey">
							店铺已下架
						</view>
					</template>
				</view>
				<view class="shop-desc">
					{{shopInfo.shop.description ? shopInfo.shop.description : ''}}
				</view>
				<view class="shop-txt" @click="makeCall">联系电话：{{shopInfo.shop.telephone}}</view>
				<view class="flex" @click="openShopLocation">
					<view class="shop-txt">商户地址：{{shopInfo.shop.area_address}}{{shopInfo.shop.address}}</view>
					<image class="loction" src="../../static/images/icon_loction.svg" mode=""></image>
				</view>
			</view>
		</view>
		<view class="goods-container">
			<view v-for="item in goods" :key="item.goods.id" class="good-list" @click="toDetail(item)">
				<goods-item :item="item" :isLeader="isLeader"></goods-item>
			</view>
		</view>
	</view>
</template>

<script>
	import { shopDetail, indexGoods } from '../../http/apis.js';
	import { mapGetters } from "vuex";
	
	export default {
		name: 'mall-detail',
		data() {
			return {
				shopInfo: null,
				goods: [],
				paddingTop: getApp().globalData.statusBarHeight,
				navBarHeight: getApp().globalData.navBarHeight,
				currentPage: 1,
				nextPage: 1,
				lon: 0, // 纬度
				lat: 0, // 经度
				isLoading: false,
			}
		},
		onLoad(e) {
			this.shopId = parseInt(e.id);
			this.getDetail();
			this.getGoods();
		},
		onShow() {
			
		},
		onReachBottom() {
			this.loadMore();
		},
		computed: {
			...mapGetters(['isLeader'])
		},
		methods: {
			back() {
				const pages = getCurrentPages();
				if (pages.length > 1) {
					uni.navigateBack()
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			getDetail() {
				uni.showLoading({});
				shopDetail({id: this.shopId}).then(res => {
					if (res.shop.images) res.shop.images = res.shop.images.split(',');
					this.shopInfo = res;
					uni.hideLoading({});
				}).catch(res => {
					uni.hideLoading({})
				})
			},
			getGoods() {
				if (this.isLoading) return;
				this.isLoading = true;
				let params = {
					shop_id: this.shopId,
					page: this.currentPage,
				}
				indexGoods(params).then(res => {
					if (this.currentPage > 1) {
						this.goods = this.goods.concat(res.data)
					} else {
						this.goods = res.data || [];
					}
					this.nextPage = res.next_page;
					this.isLoading = false;
				}).catch(res => {
					this.isLoading = false;
				})
			},
			loadMore() {
				if (this.currentPage < this.nextPage && !this.isLoading) {
					this.currentPage += 1;
					this.getGoods()
				}
			},
			// 跳转
			toDetail(item) {
				uni.navigateTo({
					url: `/pages/goodsDetail/index?id=${item.goods.id}`
				})
			},
			toPay() {
				const shop = this.shopInfo.shop;
				uni.navigateTo({
					url: `/pages/mall/pay?id=${shop.id}`
				})
			},
			// 打开商户地址导航
			openShopLocation() {
				uni.openLocation({
					latitude: this.shopInfo.shop.lat,
					longitude: this.shopInfo.shop.lon,
					name: this.shopInfo.shop.name,
					address: this.shopInfo.shop.address,
					scale:28
				})
			},
			// 商户电话
			makeCall() {
				uni.makePhoneCall({
					phoneNumber: this.shopInfo.shop.telephone
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.flex-center {
		display: flex;
		align-items: center;
	}
	.box {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 20rpx 20rpx 40rpx 20rpx;
		box-sizing: border-box;
	}
	.arrow {
		width: 12rpx;
		height: 24rpx;
	}
	.container {
		width: 100%;
		min-height: 100vh;
		padding: 0 0 50rpx 0;
		box-sizing: border-box;
		background-color: #F8FAFD;
		position: relative;
	}
	.shop-box {
		width: 100%;
		padding: 0 24rpx;
		box-sizing: border-box;
		.shop-name {
			color: #2e2e2e;
			font-size: 32rpx;
			line-height: 40rpx;
		}
		.shop-cate {
			padding: 6rpx 16rpx;
			box-sizing: border-box;
			color: #F97028;
			font-size: 24rpx;
			border-radius: 8rpx;
			background: rgba(249, 112, 40, 0.1);
			margin-left: 10rpx;
		}
		.shop-txt {
			color: #969799;
			font-size: 24rpx;
			line-height: 44rpx;
		}
		.loction {
			width: 44rpx;
			height: 44rpx;
		}
		.shop-desc {
			color: #2e2e2e;
			font-size: 24rpx;
			line-height: 40rpx;
			width: 75%;
			height: 80rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			margin: 10rpx 0;
		}
		.shop-btn {
			color: #30240A;
			font-size: 24rpx;
			border-radius: 28rpx;
			padding: 0 40rpx;
			height: 56rpx;
			line-height: 56rpx;
			box-sizing: border-box;
			background: linear-gradient(89deg, #FADF5D 2%, #F7D35D 99%);
		}
		.shop-btn-grey {
			background: #989898;
			color: #fff;
			font-size: 24rpx;
			border-radius: 28rpx;
			padding: 0 40rpx;
			height: 56rpx;
			line-height: 56rpx;
			box-sizing: border-box;
		}
	}
	.nav-bar {
		position: absolute;
		top: 100rpx;
		left: 25rpx;
		height: 60rpx;
		width: 60rpx;
		background-color: rgba(0, 0, 0, 0.7);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 99
	}
	.uni-margin-wrap {
		width: 100%;
		height: 542rpx;
		margin-bottom: 28rpx;
		.single-banner {
			width: 100%;
			height: 100%;
		}
		.swiper {
			width: 100%;
			height: 542rpx;
			.swiper-ad {
				width: 100%;
				height: 542rpx;
			}
		}
	}
	.goods-container {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 24rpx;
		padding: 0 24rpx 20rpx 24rpx;
		box-sizing: border-box;
		.good-list {
			width: 340rpx;
			height: 460rpx;
			margin-bottom: 24rpx;
		}
	}
</style>